<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .demo1{
            color: #338cc8;
        }
        .demo2{
            color: gainsboro;
        }
    </style>
</head>
<body>
   <div style="width:1210px ; height:700px; ">
       <div style=" float: left; width: 400px; height: 600px; ">
        <div style=" height:40px;"> 
            <span style="color:green">热点内容</span> （ <span style="color:gray">更多</span>） 
        </div>
        <div>
            <div style=" float:left; width:190px; height:200px; ">
                <div style=" width: 49%; height: 49%;">
                    <img  src="img/早市.webp" alt="">
                    <div style=" font-size :12px">
                        <span style=" color:#338cc8">早市系列</span>
                        <span style=" color:gainsboro">58张照片</span>
                    </div>
                </div>                
            </div>
            <div style="float:right; width:190px; height:200px; ">
                <div style=" width: 49%; height: 49%;">
                    <img  src="img/润西湖.webp" alt="">
                    <div style=" font-size :12px">
                        <span style=" color:#338cc8">润西湖</span>
                        <span style=" color:gainsboro">50张照片</span>
                    </div>
                </div>                
            </div>
            <div style=" float:left; width:190px; height:200px; ">
                <div style=" width: 49%; height: 49%;">
                    <img src="img/苏州.webp" alt="">
                    <div style=" font-size :12px">
                        <span style=" color:#338cc8">印象苏州</span>
                        <span style=" color:gainsboro">30张照片</span>
                    </div>
                </div>                
            </div>
            <div style=" float:right; width:190px; height:200px; ">
                <div style=" width: 49%; height: 49%;">
                    <img src="img/天津.webp" alt="">
                    <div style=" font-size :12px">
                        <span style=" color:#338cc8">十月天津</span>
                        <span style=" color:gainsboro">45张照片</span>
                    </div>
                </div>                
            </div>
            
            
        </div>
    </div>
       <div style="float: left; width: 400px; height: 600px; ">
        <span style="color:#338cc8;">
                35秒，我们的船撞了冰山<br/>
        </span>
                全拼的日记<br/>
                （这篇本来想昨天元宵节发出的，因为故事本身有<br/>
                个相对圆满的结局） 给你35秒，能做...<br/><br/>            
        <span style="color:#338cc8;">
                剃头<br/><br/>
                给《流浪地球》五星是爱国，一星是恨国？| 杨时旸<br/>
                专栏<br/><br/>
                奇幻童年和独居老人<br/><br/>
                韩松：家是一个令人眩晕的洞 | 科幻春晚<br/><br/>
                宇宙里最珍贵的金黄液体，是小米稀粥 | 科幻春晚
        </span>        
    </div>
       <div style="float: left; width: 400px; height: 600px; ">
        <div style=" width:390px;height: 180px; ">            
             <img style="width:100% ;height: 90%;" src="img/豆瓣书店.jpg" alt="">            
        </div>
        <div style=" height:60px;"> 
                <span style="color:green">热门话题</span> （ <span style="color:gray">去话题广场</span>） 
            </div>
        <div>
                <span class=" demo demo1">你入手的那些有趣的博物馆文创</span><br/> 
                <span class=" demo demo2">65301人浏览</span> <br/><br/>
                <span class=" demo demo1">视频·我在跳舞的时候最快乐</span> <br/>
                <span class=" demo demo2">67124人浏览</span> <br/><br/>
                <span class=" demo demo1">我的徒步之旅</span> <br/>
                <span class=" demo demo2">221139人浏览</span> <br/><br/>
                <span class=" demo demo1">我种的小树苗长大了</span> <br/>
                <span class=" demo demo2">新话题 · 14116人浏览</span><br/><br/> 
                <span class=" demo demo1">你在豆瓣发现的“奇书”</span> <br/>
                <span class=" demo demo2">3997987人浏览</span> <br/><br/>
                <span class=" demo demo1">堪称精神污染的广告</span> <br/>
                <span class=" demo demo2">2333684人浏览</span>              
                
        </div>
    </div>
   </div> 
</body>
</html>